import { selectedKeysByPath } from '@/utils'
import { Menu } from 'antd'
import Layout, { Content } from 'antd/lib/layout/layout'
import Sider from 'antd/lib/layout/Sider'
import React from 'react'
import { Link, Redirect, Route, Switch, useHistory } from 'react-router-dom'

function index() {
  const history = useHistory()
  return (
    <Layout style={{
      display: 'flex',
      flexDirection: 'row'
    }}>
      <Sider style={{
      }}>
        <Menu style={{
          height: 'calc(100vh - 64px)'
        }} theme="dark" selectedKeys={selectedKeysByPath(history, ["/games/wow", "/games/dota2"])}>
          <Menu.Item key="/games/wow">
            <Link to="/games/wow">魔兽世界</Link>
          </Menu.Item>
          <Menu.Item key="/games/dota2">
            <Link to="/games/dota2">DOTA2</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Content style={{
        flex: 1
      }}>
        <Switch>
          <Route path="/games/wow" component={require("./wow").default}></Route>
          <Route path="/games/dota2" component={require("./dota2").default}></Route>
          <Redirect to="/games/wow" />
        </Switch>
      </Content>
    </Layout>
  )
}

export default index
